<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { order_list } from '@/api/order'

let list = ref([])

let loadList = () => {
  order_list(queryForm.value).then((res: any) => {
    list.value = res.data.data
  })
}

let queryForm = ref({
  page: 1,
  list_rows: 10,
  status: 0
})

function handleSelect(e: any) {
  queryForm.value.status = e
  loadList()
}

onMounted(() => {
  loadList()
})
</script>

<template>
  <div>
    <el-menu :default-active="0" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item :index="0">全部订单</el-menu-item>
      <el-menu-item :index="1">待收货</el-menu-item>
      <el-menu-item :index="3">已完成</el-menu-item>
    </el-menu>

    <el-table :data="list" border style="margin-top: 20px" height="400">
      <el-table-column label="订单编号" prop="order_sn"></el-table-column>
      <el-table-column label="商品图片">
        <template #default="scope">
          <img :src="scope.row.goods_logo" alt="" style="width: 100px; height: auto" />
        </template>
      </el-table-column>
      <el-table-column label="商品名称" prop="goods_name"></el-table-column>
      <el-table-column label="下单数量" prop="goods_num" width="100"></el-table-column>
      <el-table-column label="订单金额" prop="total_amount"></el-table-column>
      <el-table-column label="下单时间" prop="add_time"></el-table-column>
      <el-table-column label="订单状态" width="100">
        <template #default="scope">
          <el-tag type="success" v-if="scope.row.order_status == 3">已完成</el-tag>
          <el-tag type="warning" v-if="scope.row.order_status == 1">待收货</el-tag>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style scoped></style>
